<template>
  <div class="wrap">
    <com-title-item title="图片信息">
      <com-image-list
        :imageVO.sync="imageVO"
        :houDelId="houDelId"
        :isVrHouse="hmDelSummaryInfo.houSubType == 1"
        :houDelVO="houDelVO"
        :houImageVO="info.houImageVO"
        @reload="reload"
      ></com-image-list>
    </com-title-item>
  </div>
</template>
<script>
import ComTitleItem from '@/views/house/com/com-title-item';
import ComImageList from '@/views/house/com/com-image-list.vue';
import { mapActions, mapGetters, mapState } from 'vuex';
import { updateImage } from '@/api/user';

export default {
  name: 'TabImg',
  shulan: true,
  components: {
    ComImageList,
    ComTitleItem,
  },
  props: {},
  data() {
    return {
      imageVO: {
        houseTypeList: [], //房型图
        indoorList: [], //室内图
        circumList: [], //小区图
      },
      modifiedCount: 2,
    };
  },
  created() {},
  mounted() {

  },
  watch: {
    imageVO: {
      deep: true,
      handler(value) {
        this.modifiedCount--;
        // this.$emit('updateTabNames', this.$options.name, value.indoorList.length)
      },
    },
  },
  computed: {
    ...mapState({
      info: (state) => state.houseInfo,
      hmDelSummaryInfo: (state) => state.houseInfo.hmDelSummaryInfo,
      houDelVO: (state) => state.houseInfo.houDelVO,
    }),
    ...mapGetters({
      houDelId: 'houseInfo/houDelId',
      indoorList: 'houseInfo/indoorList'
    }),
  },
  methods: {
    ...mapActions({
      updateInfoById: 'houseInfo/updateInfoById',
    }),

    reload() {
      this.updateInfoById(this.houDelId);
    },

    // 点击保存补充室内图
    save() {
      if (this.modifiedCount > 0) return Promise.resolve();

      let houImgList = [...this.imageVO.indoorList, ...this.imageVO.houseTypeList, ...this.imageVO.circumList];
      houImgList.forEach((item, index) => {
        item.cover = index;
        return item;
      });

      return updateImage({ houImgList });
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.wrap {
  height: 500px;
  overflow: auto;
  padding-right: 10px;
  @include scrollBar;
}
</style>